@import '@/lib/reset.scss';

.album_nav_box {
  @include rect(1200px, 216px);
  // background: #f00;
  @include margin(0 auto);
  @include padding(52px 0 0);
  position: relative;
  .album_nav {
    @include rect(1200px, 41px);
    // background: #0f0;
    float: left;
    ul {
      h1 {
        @include rect(65px, 26px);
        // background: #f0f;
        float: left;
        line-height: 26px;
        // text-align: center;
      }
      li {
        // @include rect(65px, 26px);
        height: 26px;
        // background: #ff0;
        float: left;
        line-height: 26px;
        @include margin(0 24px 15px 0 );
        @include padding(0 8px);
        // background: #0ff;
        @include text-color(#000);
        cursor: pointer;
        &:hover {
          @include text-color(#31c27c);
        }
      }
      .active_area, .active_genre, .active_type, .active_y {
        background: #31c27c;
        @include text-color(#fff);
        &:hover {
          @include text-color(#fff);
        }
      }
    }
  }
  .part_detail__hd {
    @include rect(1200px, 60px);
    float: left;
    // background: #f00;
  }
  //歌曲分类的框框
  .part_detail__hd {
    position: relative;
    .part_detail__h2 {
      position: absolute;
      z-index: 1;
      line-height: 58px;
      font-size: 22px;
      font-weight: 500;
      float: left;
    }
    div {
      @include padding(0 25px 0 10px);
      @include margin(8px 6px 0 0);
      background: #fff;
      float: left;
      line-height: 38px;
      border-radius: 4px;
      font-size: 14px;
      border: 1px solid #c9c9c9;
      display: none;
      position: relative;
      z-index: 2;
      .icon-close_light {
        // background: #0ff;
        @include rect(18px, 18px);
        font-size: 16px;
        line-height: 18px;
        text-align: center;
        position: absolute;
        top: 10px;
        right: 2px;
        cursor: pointer;
        border-radius: 50%;
        &:hover {
          background: rgba($color: #fff, $alpha: 0.5)
        }
      }
      &:hover {
        background: #31c27c;
        @include text-color(#fff)
      }
    }
  }
  //年代---列表
  #album_year_list {
    position: absolute;
    z-index: 3;
    top: 200px;
    background: #fff;
    @include rect(1200px, 65px);
    box-shadow: 0px 0px 1px 3px #eee;
    display: none;
    ul {
      @include rect(1200px, 41px);
      @include margin(20px 0 0);
      @include padding(0 0 0 60px);
      // background: #ff0;
      li {
        @include padding(0 8px);
        @include margin(0 24px 15px 0);
        float: left;
        line-height: 26px;
        cursor: pointer;
        &:hover {
          @include text-color(#31c27c);
        }
      }
    }
  }
  //唱片公司---列表
  #album_EMI_list {
    position: absolute;
    z-index: 3;
    top: 200px;
    background: #fff;
    @include rect(1200px, 106px);
    box-shadow: 0px 0px 1px 3px #eee;
    display: none;
    ul {
      @include rect(1200px, 82px);
      @include margin(20px 0 0);
      @include padding(0 0 0 60px);
      // background: #ff0;
      li {
        @include padding(0 8px);
        @include margin(0 24px 15px 0);
        float: left;
        line-height: 26px;
        cursor: pointer;
        &:hover {
          @include text-color(#31c27c);
        }
      }
    }
  }
}